<script setup>
import { ref , onMounted } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import {defaults as defaultControls, Zoom, ZoomSlider, ZoomToExtent} from 'ol/control'
import { easeOut } from "ol/easing.js";
const map = ref()

const zoomCtl = ()=>{
  let zoom = new Zoom({
    className: "ol-zoom-custom",//CSS 类名
    duration:1000,
    zoomInLabel: '+', // 放大文本标签
    zoomInTipLabel: "放大",//用于按钮提示的文本标签
    zoomOutTipLabel: "缩小",//用于按钮提示的文本标签
    delta: 1, // 每次点击缩放量
  });
  map.value.addControl(zoom)
}

const render = ()=>{
  console.log('渲染')
}

const zoomSlider = ()=>{
  const zoomSlider = new ZoomSlider({
    duration: 1000,//以毫秒为单位的动画持续时间
    render,
  })
  map.value.addControl(zoomSlider)
}

const zoomToExtend = ()=> {
  const extent = new ZoomToExtent({
    extent: [
      813079.7791264898, 5929220.284081122,
      848966.9639063801, 5936863.986909639
    ],
    label:"T",
    tipLabel:"复位",
  })
  map.value.addControl(extent)
}

const initMap = ()=>{
  map.value = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
      })
    ],
    controls: defaultControls({
      zoom: false
    }),
    view: new View({
      center: [113.24981689453125, 23.126468438108688], //视图中心位置
      projection: "EPSG:4326", //指定投影,84参考系投影
      zoom: 12,  //缩放到的级别
    })
  })
  // zoomCtl();
  // zoomSlider();
  zoomToExtend();
}

onMounted(()=>{
  initMap()
})

</script>

<template>
  <div id="map"></div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 100%;
}

.ol-viewport .ol-zoom-custom {
  top: .5em;
  right: .5em;
}
</style>